<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title></title>
<style>
  /* 热点图样式 overflow:hidden超出部分 隐藏*/
.banner{position:relative;overflow:hidden;margin:100px auto;width:300px;height:150px;}
.banner ul{margin:0;padding:0;list-style:none;}
.hot{position:absolute;top:0;left:0;font-size: 0px;}
.hot li{float:left;}
/* 小圆点样式 */
.dot{position:absolute;bottom:10px;width:100%;text-align:center;font-size:0;}
.dot li{display:block;display:inline-block;margin:0 5px;width:15px;height:15px;border-radius:100%;background:rgba(145,144,144,.5);cursor:pointer;}
.dot .on{background-color:#fff;}
/* 左右翻页箭头样式 */
/* .arrow{display:none;} */
.arrow span{display:block;width:50px;height:100px;background:rgba(0,0,0,.6);color:#fff;text-align:center;font-size:40px;line-height:100px;cursor:pointer;}
.arrow .prev{position:absolute;top:50%;left:0;margin-top:-50px;}
.arrow .next{position:absolute;top:50%;right:0;margin-top:-50px;}
/* 5个盒子 */
.box1{width:300px;height:150px;float:left;background:red}
.box2{width:300px;height:150px;float:left;background:goldenrod}
.box3{width:300px;height:150px;float:left;background:blueviolet}
.box4{width:300px;height:150px;float:left;background:tan}
.box5{width:300px;height:150px;float:left;background:green}
</style>

</head>
<body>
	<div class="banner">
		<ul class="hot">
			<!-- 轮播图片 -->
			<li><div class="box1"></div></li>
			<li><div class="box2"></div></li>
			<li><div class="box3"></div></li>
			<li><div class="box4"></div></li>
			<li><div class="box5"></div></li>
		</ul>
		<!-- 小圆点 -->
		<ul class="dot"><li class="on"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>	
		</ul>
		<!-- 左右翻页箭头 -->
		<div class="arrow">
			<span class="prev">&lt;</span>
			<span class="next">&gt;</span>	
		</div>
	</div>
	
	<script>
	//入口函数
	$(function(){
	var width=300;
	var i=0;
	var delay=1000;
	
	//设置宽度
	$('.hot').width($('.hot>li').length*width);
	$('.next').click(function(){
		//最后一张切到第一张
		i=++i%5;
		// i++;
		moveImg();
	})
		//写动画 向后
		$('.prev').click(function(){
			i ? i--:i=4;
			// i--;
		moveImg();
			
	// 	$('.hot').animate({left:-i*width},200)
	// })
	//向前
	// $('.prev').click(function(){
	// 	i ? i--:i=4;
	// 	// i--;
	// 	moveImg();
		
	})
	$('.dot>li').click(function(){
		i=$(this).index();
		moveImg();
		
	})
	
	
	timer=setInterval(autoMove,delay)
	//鼠标停止事件
	$('.banner').hover(function(){
		clearInterval(timer)
		},function(){
		timer=setInterval(autoMove,delay)
	})
	
	//轮播图 自动轮播
	
	function autoMove(){
		i=++i%5;
		moveImg();
	}
	
	

	function moveImg(){
		$('.hot').stop().animate({left:-i*width},200)
		changeDot()
	}


	//找到dot
	function changeDot(){
		$('.dot>li').eq(i).addClass('on').siblings().removeClass('on')
		
		// $('.dot>li').removeClass('on').equals(i).addClass('on')
		// $('.dot>li').equals(i).addClass('on')
		
	}
		
	})
	</script>
</body>
</html>
